<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="../js/bootstrap/css/bootstrap-theme.min.css"></script> -->
<link rel="stylesheet" type="text/css" href="../mycss/style.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../laypage/laypage.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<title>Insert title here</title>
</head>

<body id="tablePage">
<div>
<blockquote>
服务创建
		</blockquote> 
		<hr/>	
<!-- *******************************************************************************抬头泛查询表单****************************************************************************************************************** -->
<form class="form-horizontal row" id="selectF">
<label class="control-label col-xs-2"  style="width:14%" for="formGroupInputsmall">服务名称</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="serviceName" value=''>
  </div>
 <label class="col-xs-1 control-label"  for="formGroupInputsmall">类型</label>
  <div class="col-xs-2">
  <select class="form-control" name="serviceType" id="typeM">
    				<option value=''>不限</option>
			      <option>咨询服务</option>
			      <option>投诉服务</option>
			      <option>售前服务</option>
			      <option>售后服务</option>
				  </select> 
  </div>
  <label class="col-xs-1 control-label" for="formGroupInputsmall">状态</label> 
  <div class="col-xs-2">
    <select class="form-control" name="state" id="stateM">
   				<option value=''>不限</option>
			      <option>新创建</option>
			      <option>已提交</option>
			      <option>已分配</option>
			      <option>已处理</option>
			      <option>已反馈</option>
			      <option>已归档</option>
				  </select>
			  
  </div>
 <button type="button" class="btn btn-primary col-xs-1" id="selectA">查询</button> 
 <button type="button" class="btn btn-primary col-xs-1 insertB" data-toggle="modal" data-target="#insertM">添加</button>
</form>
<!-- **********************************************************************************正式表格***************************************************************************************************************** -->
<div class="tableDiv">
		<table id="conTable" class="table table-bordered" >
			<tr class="info"><td></td><td></td><td>服务名称</td><td>类型</td><td>状态</td><td>操作时间</td><td>操作人</td><td>待处理人（司）</td><td>操作</td></tr>
			<tr class="active" v-for="item in home"><td></td><td><input type="radio" name="radio" /></td><td>{{item.serviceName}}</td><td>{{item.serviceType}}</td><td>{{item.state}}</td><td>{{item.createTime}}</td><td>{{item.heyunEmp1.empRealName}}</td><td>{{item.heyunEmp2.empRealName}}</td>
			<td>
			
			<input v-if="item.state!='已归档'" class="btn btn-primary btn-xs active updateB" :update_id="item.serviceId" type="button" value="修改" data-toggle="modal" data-target="#updateM">&nbsp;&nbsp;
			     <input v-if="item.state=='新创建'" class="btn btn-danger btn-xs active delB" type="button"  :del_id="item.serviceId" value="删除" data-toggle="modal" data-target="#delM">&nbsp;&nbsp;
			     <input v-if="item.state!='已归档'" class="btn btn-info btn-xs active getB" type="button"  :get_id="item.serviceId" value="查看" data-toggle="modal" data-target="#getM">&nbsp;&nbsp;
			     <input v-if="item.state=='新创建'" class="btn btn-warning btn-xs active submitB" type="button"   :submit_id="item.serviceId" value="提交" data-toggle="modal" data-target="#submitM">&nbsp;&nbsp;</td></tr>
			     <tr >
			      <td id="clear" colspan="9"></td>
			      </tr>
		</table>	
	</div>
<!-- ***************************************************************************** 添加的模态框****************************************************************************************************************** -->
<div class="modal fade" id="insertM" tabindex="-1" role="dialog" aria-labelledby="insertMLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">新增</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	          
	      	  <!-- 姓名框 -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label">服务名称</label>
			    <div class="col-sm-6">
			      <input type="text" name="serviceName"  class="form-control" id="serviceNameMI" placeholder="Service name is here .">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">服务类型</label>
			    <div class="col-sm-5">
			      <select class="form-control cus" name="serviceType" id="serviceTypeMI">
			      <option>咨询服务</option>
			      <option>投诉服务</option>
			      <option>售前服务</option>
			      <option>售后服务</option>
				  </select>
			    </div>
			  </div>
			  <!--  -->
			  
			   <div class="form-group">
			    <label class="col-sm-2 control-label cus" >服务客户</label>
			    <div class="col-sm-6">
				  <select class="form-control" name="heyunCustomer.cusId" id="cusNameMI">
			      <option v-for="item in cus" :value="item.cusId">{{item.cusName}}</option>			      
				  </select>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label" >联系电话</label>
			    <div class="col-sm-6">
			     <select class="form-control" id="cusTelMI">
			      <option v-for="item in cus" :value="item.cusId">{{item.cusTel}}</option>			      
				  </select>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label">服务内容</label>
			    <div class="col-sm-6">
			      <textarea class="form-control" rows="3" name="serviceContent"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label">备注信息</label>
			    <div class="col-sm-6">
			      <textarea class="form-control" rows="3" name="remarks"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label">待处理人</label>
			    <div class="col-sm-6">
			     <select class="form-control" name="heyunEmp2.empId" id="empRealNameMI">
			      <option v-for="item in emp" :value="item.empId">{{item.empRealName}}</option>			      
				  </select>
			      <span class="help-block"></span>
			    </div>
			  </div>			
            </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="insertMB">添加</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!--***********************************************************************************************修改的模态框****************************************************************************************************--> 
<div class="modal fade" id="updateM" tabindex="-1" role="dialog" aria-labelledby="insertMLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">修改</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal"> 
	      	  <!-- 姓名框 -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label">服务名称</label>
			    <div class="col-sm-6">
			      <input type="text" name="serviceName"  class="form-control" id="serviceNameMU" >
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">服务类型</label>
			    <div class="col-sm-5">
			      <select class="form-control" name="serviceType" id="serviceTypeMU">
			      <option>咨询服务</option>
			      <option>投诉服务</option>
			      <option>售前服务</option>
			      <option>售后服务</option>
				  </select>
			    </div>
			  </div>
			  <!--  -->
			   <div class="form-group">
			    <label name="heyunCustomer.cusId" class="col-sm-2 control-label" >服务客户</label>
			    <div class="col-sm-6">
			    <select class="form-control" name="heyunCustomer.cusId" id="cusNameMU">
			      <option v-for="item in cus" :value="item.cusId">{{item.cusName}}</option>			      
				  </select>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label" >联系电话</label>
			    <div class="col-sm-6">
			       <select class="form-control" id="cusTelMU">
			      <option v-for="item in cus" :value="item.cusId">{{item.cusTel}}</option>			      
				  </select>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label">服务内容</label>
			    <div class="col-sm-6">
			      <textarea class="form-control" rows="3" id="serviceContentMU" name="serviceContent"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!--  -->
			  <div class="form-group">
			    <label class="col-sm-2 control-label">备注信息</label>
			    <div class="col-sm-6">
			      <textarea class="form-control" rows="3" id="remarksMU" name="remarks"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="updateMB">更新</button>
	      </div>
	    </div>
	  </div>
	</div>
<!--*************************************************************************************查看的模态框*********************************************************************************************************-->
 <div class="modal fade" id="getM" tabindex="-1" role="dialog" >
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">查看</h4>
	      </div>
	      <div class="modal-body">
	      <ul class="list-group">
				<li class="list-group-item" id="serviceNameMG">服务名称：</li>
				<li class="list-group-item" id="serviceTypeMG">服务类型：</li>
				<li class="list-group-item" id="cusNameMG">服务客户：</li>
				<li class="list-group-item" id="cusTelMG">联系电话：</li>
				<li class="list-group-item" id="serviceContentMG">服务内容：</li>
				<li class="list-group-item" id="remarksMG">备注：</li>
				</ul>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div> 
<!--*****************************************************************************************边界线**************************************************************************************************************-->
</div>
</body>
<script type="text/javascript">
/******************************************************************************存留模态框中的原始数据************************************************************************************/
/* $(document).ready(function(){
	 var name=$("#serviceNameMG").html();
	 var type=$("#serviceTypeMG").html();
	 var cusName=$("#cusNameMG").html();
	 var cusTel=$("#cusTelMG").html();
	 var content=$("#serviceContentMG").html();
	 var remarks=$("#remarksMG").html(); 
 })  */
 
/*  var name=$("#serviceNameMG").html(); */
/*var type=$("#serviceTypeMG").html();
var cusName=$("#cusNameMG").html();
var cusTel=$("#cusTelMG").html();
var content=$("#serviceContentMG").html();
var remarks=$("#remarksMG").html(); */
/*********************************************************************************预添加并注值******************************************************)**************************************/
$(document).on("click",".insertB",function(){
	$.ajax({
		url:'../heyunCustomer/select',
		type:"post",
		dataType:'json',
		success:function(result){
			insertM.cus=result;			
		}
	})
	$.ajax({
		url:'../heyunEmp/select',
		type:"post",
		dataType:'json',
		success:function(result){
			insertM.emp=result;	
			console.log(result);
			console.log(result[2].empRealName);
		}
	})
})
var insertM=new Vue({
		el : '#insertM',
		data:{
			cus:'',
			emp:'',
		},
		methods:{
					}
})
$(document).on("change","#cusNameMI",function(){
	var temp=$("#cusNameMI option:selected").val();
	console.log(temp+"---");
	$("#cusTelMI option[value='"+temp+"']").attr("selected","selected");
})
$(document).on("change","#cusTelMI",function(){
	var temp=$("#cusTelMI option:selected").val();
	console.log(temp+"---");
	$("#cusNameMI option[value='"+temp+"']").attr("selected","selected");
}) 
/********************************************************************************添加按钮真的添加*****************************************************************************************/
 $(document).on("click","#insertMB",function(){
	$("#insertM").modal("hide");
	console.log($("#insertM form").serialize());
	$.ajax({
		url:'../heyunService/insert',
		type:'post',
		dataType:'json',
		data:$("#insertM form").serialize()+'&state=新创建&heyunEmp1.empId='+"${sessionScope.user.empId}",
		success:function(result){
			conTable.search(1);
			//创建者先拟为session12
			
		}
	})
}) 
/************************************************************************查询正式表格展示***************************************************************************************/
  $(document).ready(function(){ 
	conTable.search(1);
 }) 
 var conTable=new Vue({
	el:"#conTable",
	data:{
		home:''
	},
	methods:{
		search:function(currentPage){
			var _self = this;
			$.ajax({
				url:'../heyunService/select',
				type : 'post',
				dataType : 'json',
				data:{'currentPage':currentPage,'state':'新创建'},
				success:function(data){
					_self.home=data.heyunServiceList;
					laypage({					     
						  cont: $("#clear"),  //定义分页显示的容器
						  pages:data.totalPage,  //从后台查询得到总页数
						  curr:currentPage,     
						  skin: 'molv', 
						  skip:true, 
						  last:'末页',
						  groups:3,  
						  jump: function(obj, first){ 
						  console.log("==========================");							
						    if(!first){   
						    	conTable.search(obj.curr);
						    }
						  }
					 }); 
				 }
			})	
		},
			search2:function(currentPage){
				var _self = this;
				$.ajax({
					url:'../heyunService/select',
					type : 'post',
					dataType : 'json',
					data:$("#selectF form").serialize()+'&currentPage='+currentPage,
					success:function(data){
						_self.home=data.heyunServiceList;
						console.log(data.heyunServiceList);
						
						laypage({					     
							  cont: $("#clear"),  //定义分页显示的容器
							  pages:data.totalPage,  //从后台查询得到总页数
							  curr:currentPage,
							  
							  skin: 'molv', 
							  skip:true, 
							  last:'末页',
							  groups:3,  
							  jump: function(obj, first){ 
							  console.log("==========================");							
							    if(!first){   
							    	conTable.search2(obj.curr);
							    	
							    }
							  }
						 });
					 }
				})	
			
		}
	}
}) 
/*************************************************************************************预修改************************************************************************************************/
  var updateM=new Vue({
		el : '#updateM',
		data:{
			cus:'',
		},
		methods:{
					}
})
 $(document).on("click",".updateB",function(){
	 //先绑定到模态框按钮上
	 var serviceId=$(this).attr("update_id");
	 $("#updateMB").attr("serviceId",serviceId);	 
	 if(insertM.cus!=''){ 
			updateM.cus=insertM.cus;
		 }
		else{
			$.ajax({
				url:'../heyunCustomer/select',
				type:"post",
				dataType:'json',
				success:function(result){
					updateM.cus=result;			
				}
			})
		}
	 //单挑查询
	 $.ajax({ 
	 	url:'../heyunService/select',
	 	type:"post",
		data:{'serviceId':serviceId,'currentPage':1},
		success:function(result){
			var resultT=result.heyunServiceList[0];
			$("#serviceNameMU").val(resultT.serviceName);
			$("#serviceTypeMU").val(resultT.serviceType);
			 $("#cusNameMU option[value='"+resultT.heyunCustomer.cusId+"']").attr("selected", true);
			 $("#cusTelMU option[value='"+resultT.heyunCustomer.cusId+"']").attr("selected", true);
			$("#serviceContentMU").val(resultT.serviceContent);
			$("#remarksMU").val(resultT.remarks);
		}
	 })
 })
 $(document).on("change","#cusNameMU",function(){
		var temp=$("#cusNameMU option:selected").val();
		console.log(temp+"---");
		$("#cusTelMU option[value='"+temp+"']").attr("selected","selected");
	})
	$(document).on("change","#cusTelMU",function(){
		var temp=$("#cusTelMU option:selected").val();
		console.log(temp+"---");
		$("#cusNameMU option[value='"+temp+"']").attr("selected","selected");
	}) 
/********************************************************************************************正式修改********************************************************************************************/
 $(document).on("click","#updateMB",function(){
		$("#updateM").modal("hide");
			console.log($("#updateM form").serialize());
			$.ajax({
				url:'../heyunService/update?serviceId='+ $(this).attr("serviceId"),
				type:'post',
				dataType:'json',
				data:$("#updateM form").serialize()+'&state=新创建&heyunEmp1.empId=5',
				success:function(result){
					conTable.search(1);
					//创建者先拟为session5
					console.log(result+"p");
				}
		})
}) 
/**********************************************************************************正式提交（无预提交，无需模态框）****************************************************************************************/
$(document).on("click",".submitB",function(){
		var serviceId=$(this).attr("submit_id");
		if(confirm("确认提交？")){
			$.ajax({
				url:'../heyunService/update',
				type:"post",
				dataType:'json',
				data:{'serviceId':serviceId,'state':'已提交'},
				success:function(result){
					conTable.search(1);
					console.log(result);
					}
			  })
		}
}) 
/******************************************************************************正式删除（无预删除，无需模态框）************************************************************************************/
 $(document).on("click",".delB",function(){                                                                          
		var serviceId=$(this).attr("del_id");
		if(confirm("确认删除？")){
			$.ajax({
				url:'../heyunService/delete',
				type:"post",
				dataType:'json',
				data:{'serviceId':serviceId},
				success:function(result){
					conTable.search(1);
					
					}
			  })
		}
}) 
/******************************************************************************预查看（只需模态框，没有正式，来了数据就不再回去了）************************************************************************************/
 $(document).on("click",".getB",function(){ 
	var serviceId=$(this).attr("get_id");
	 console.log(serviceId+"pppo");
	/* $("#serviceNameMG").html(name);
	$("#serviceTypeMG").html(type);
	$("#cusNameMG").html(cusName);
	$("#cusTelMG").html(cusTel);
	$("#serviceContentMG").html(content);
	$("#remarksMG").html(remarks); */
	$.ajax({
		url:'../heyunService/select',
		type:"post",
		dataType:'json',
		data:{'serviceId':serviceId,'currentPage':1},
		success:function(result){
			var resultT=result.heyunServiceList[0];
			$("#serviceNameMG").html('服务名称：'+resultT.serviceName);
			$("#serviceTypeMG").html('服务类型：'+resultT.serviceType);
			$("#cusNameMG").html('服务客户：'+resultT.heyunCustomer.cusName);
			$("#cusTelMG").html('联系电话：'+resultT.heyunCustomer.cusTel);
			$("#serviceContentMG").html('服务内容：'+resultT.serviceContent);
			$("#remarksMG").html('备注：'+resultT.remarks);
			}
	  })
}) 
/****************************************************************************************全局查询****************************************************************************************************************/
 $("#selectA").click(function(){
	 conTable.search2(1);
}) 
</script>
</html>